<template>
  <div>
    <tablePage ref="inspectionTab" :api="queryPickUpBypage" :param="tabParam" :isStartLoad="true">
      <template slot-scope="props">
        <Table :columns="columns" :data="props.data" @on-sort-change="props.sortChange" border></Table>
      </template>
    </tablePage>

    <xlinkModal v-model="operatModal.fleetDispatchShow" title="派单" width="1100">
      <fleetDispatch v-if="operatModal.fleetDispatchShow" :currentMainOrder="mainOrderCurrentRow" :driverList="driverList"></fleetDispatch>
    </xlinkModal>

    <xlinkModal v-model="operatModal.viewDetailShow" title="查看详情" width="1200">
      <viewDetailMainOrderList v-if="operatModal.viewDetailShow" :currentMainOrder="mainOrderCurrentRow"></viewDetailMainOrderList>
    </xlinkModal>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import xlinkModal from '@components/modal/xlinkModal'
  import fleetDispatch from './components/fleetDispath'
  import viewDetailMainOrderList from './components/viewDetailMainOrderList'
  import {queryPickUpBypage} from '@api/backEnd/fetchingBusiness/index'
  // import pinyin from '@components/common/pinyin'
  import {getdriverlist} from '@api/backEnd/fleetControl'

  export default {
    name: 'fetchingBusinessFleet',
    data () {
      let tabParam = {}
      let columns = [
        {
          title: '托运人',
          key: 'shipper'
        },
        {
          title: '联系方式',
          key: 'mobile'
        },
        {
          title: '取货地址',
          key: 'pickAddress'
        },
        {
          title: '品名',
          key: 'pm'
        },
        {
          title: '重量',
          key: 'sendWeight'
        },
        {
          title: '接回地点名称',
          key: 'stationName'
        },
        {
          title: '到站名称',
          key: 'endStationName'
        },
        {
          title: '到站收货人',
          key: 'endContacts'
        },
        {
          title: '到站联系方式',
          key: 'endMobile'
        },
        {
          title: '创建时间',
          key: 'createTime',
          sortable: true,
          sortType: 'desc',
          render: (h, params) => {
            let dateTime = params.row.createTime
            return h('Poptip', {
              props: {
                content: dateTime,
                placement: 'top',
                trigger: 'hover'
              }
            }, dateTime)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          minWidth: 250,
          render: (h, params) => {
            let viewDetailBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailAction(params.row)}>查看详情</i-button>)
            let fleetSendSingleBtn = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.fleetDispatchAction(params.row)}>派单</i-button>)
            let btnArray = []
            btnArray.push(viewDetailBtn)
            btnArray.push(fleetSendSingleBtn)
            return (btnArray)
          }
        }
      ]
      let operatModal = {
        fleetDispatchShow: false,
        viewDetailShow: false
      }
      let mainOrderCurrentRow = {}
      let driverList = []
      let datas = {
        queryPickUpBypage,
        tabParam,
        columns,
        operatModal,
        mainOrderCurrentRow,
        driverList
      }
      return datas
    },
    computed: {},
    methods: {
      driverlist () {
        getdriverlist({
          page: 1,
          pageSize: 500
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            console.log('this.addressList', this.addressList)
            let resData = res.data
            this.driverList = resData.data.list
          } else {
            console.log(res.data.res)
          }
        })
        // getAddressList().then(res => {
        //   console.log('this.addressList', this.addressList)
        //   if (res.data.isSuccess === 1) {
        //     this.addressList = res.data.data
        //   }
        // })
      },
      viewDetailAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.viewDetailShow = true
      },
      fleetDispatchAction (row) {
        this.mainOrderCurrentRow = row
        this.operatModal.fleetDispatchShow = true
      }
    },
    mounted () {
      this.driverlist()
    },
    components: {tablePage, xlinkModal, fleetDispatch, viewDetailMainOrderList}
  }
</script>
<style scoped>

</style>
